<html>
<head>
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>

<div id="info">Description
    <script src="js/three.js"></script>
    <script>
        function createCube() {
            var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
            var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

            cubeMaterial.wireframe = true;

            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            scene.add(cube);

            return cube;
        }

        function createSphere() {
            var sphereGeometry = new THREE.SphereGeometry(3);
            var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

            sphereMaterial.wireframe = true;

            var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            scene.add(sphere);

            return sphere;
        }

        var speed = 0.05;
        var xSpeed = 0;
        var ySpeed = 0;

        function onDocumentKeyDown(event) {
            var keyCode = event.which;
            if (keyCode == 87) {
                ySpeed += speed;
            } else if (keyCode == 83) {
                ySpeed -= speed;
            } else if (keyCode == 65) {
                xSpeed -= speed;
            } else if (keyCode == 68) {
                xSpeed += speed;
            } else if (keyCode == 32) {
                xSpeed = 0;
                ySpeed = 0;
            }
        }

        var width = window.innerWidth - 50;
        var height = window.innerHeight - 50;

        document.addEventListener("keydown", onDocumentKeyDown, false);

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

        var cube = createCube();
        var sphere = createSphere();

        var lineMaterial = new THREE.LineBasicMaterial({ color: 0xff00ff });

        var lineGeometry = new THREE.Geometry();
        lineGeometry.vertices.push(new THREE.Vector3(-10, 0, 0));
        lineGeometry.vertices.push(new THREE.Vector3(0, 10, 0));
        lineGeometry.vertices.push(new THREE.Vector3(10, 0, 0));

        var line = new THREE.Line(lineGeometry, lineMaterial);

        scene.add(line);

        camera.position.z = 50;

        var animate = function () {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.40;
            cube.rotation.y += 0.01;

            sphere.translateX(xSpeed);
            if (sphere.position.x > 50 || sphere.position.x < -50) {
                xSpeed = 0;
            }

            sphere.translateY(ySpeed);
            if (sphere.position.y > 30 || sphere.position.y < -30) {
                ySpeed = 0;
            }

            renderer.render(scene, camera);
        };

        animate();

    </script>
</div>
</body>
</html>